<template>
 <div class="all">
   <transition>
     <div id="hidebg" v-show="$store.state.show"></div>
   </transition>
<!-- 登录窗口 -->
    <Passport></Passport>
     <div class="main"> 
<!-- 头部 -->
     <Top></Top>
  
<!-- 标签 -->
        <Navbar></Navbar>
<!-- 主要内容 -->
        <div class="page">
            <!-- ---------- -->
            <PageTop></PageTop>  
            <PageContent></PageContent> 
        </div>
     </div>
 </div>
</template>

<script>
import PageContent from '../../components/home/PageContent.vue'
import Navbar from '../../components/home/Navbar.vue';
import PageTop from '../../components/home/PageTop.vue';
import Passport from '../../components/home/Passport.vue';
import Top from '../../components/home/Top.vue';


export default {
  name: 'App',
  components: {
    PageContent,
    Navbar,
    PageTop,
    Passport,
    Top
 
  
  },

}
</script>

<style >
*{
margin: 0;
padding: 0;
}
@keyframes show {
  from{
    opacity: 0;
  }to{
     opacity: 0.6;
   }
}
.v-enter-active{
  animation: show 0.5s ease;
}
.v-leave-active{
  animation: show 0.1s reverse;
}

html,body{
width: 1500px;
height: 1200px;
min-height: fit-content;

}
.all{
  width: 100%;
  height: 100%;
}

#hidebg {
position:absolute;left:0px;top:0px; 
background-color:#000; 
width:100%;  /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/    
height: 100%;
filter:alpha(opacity=60);  /*设置透明度为60%*/ 
opacity:0.6;  /*非IE浏览器下设置透明度为60%*/ 

z-Index:4;
}

.main{
position: relative;
width: 100%;
height: 100%; 
}


.main .page{
display: flex;
width: 100%;
height: 2000px;
margin-top: 40px;
}

</style>
